<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>粉丝交流</title>
		<link rel="stylesheet" type="text/css" href="../css/Home Page.css" />
		<link rel="stylesheet" type="text/css" href="../css/fensijiaoliu.css" />
        <script type="text/javascript" src="../js/liuyanban.js"></script>
        <style>
            #box {
                width: 800px;
                margin: 0 auto;
            }

            textarea {
                width: 800px;
            }

            #li {
                display: block;
                border-bottom: 1px dashed #ebebeb;
                margin: 10px 0;
                padding: 8px 0;
            }

        </style>
    </head>

    <body>
		<!--导航栏-->
		<div class="daohang">
			<div class="biaotou">
				<a href="Home Page.html">Stephen Curry</a>
			</div>
			<div class="fenxiang">
				<nav>
				        <ul>
							<li><a href="../Home Page.html">首页</a></li>
							<li><a href="yonghuzhuce.html" target="_blank">用户注册</a></li>
							<li><a href="fensijiaoliu.html" target="_blank">粉丝交流</a></li>
							<li><a href="#target_4">数据统计</a>
								<ul id="target_4">
									<li><a href="shujutongji-NBA.html" target="_blank">近期</a></li>
									<li><a href="shujutongji-guojiadui.html" target="_blank">历史</a></li>
								</ul> 
							</li>
				    </ul>
				</nav> 
			</div>
		</div>
        <div class="jieshao">
			
		</div>
<div class="liuyan">
	<div class="fubu">
		<div id="box" >
            <h3>交流论坛</h3>
            发布人：
			<input type="text" id="person" value="">共
			<input style="border: 0;" name="" id="louceng">
			<br /><br />
            <textarea name="" id="text" rows="10"></textarea>
            <input type="button" value="确认发布" id="btn" />
            <h3>全部留言</h3>
            <hr/>

        </div>
	</div>	
	<script>
		var num = 0;
		var num1 = 0;
		var box = document.getElementById("box");
		var text = document.getElementById("text");
		var btn = document.getElementById("btn");
		var person = document.getElementById("person");
		var ul = document.createElement("ul");
		ul.id = "ul1";
		var time = document.createElement("div");
		document.getElementById("louceng").value=num+"楼";
		btn.onclick = function() {
			//非空判断
			if(person.value==""||person.value==null){
				alert("发布人不允许为空！");
				return false;
			}
			if(text.value==""||text.value==null){
				alert("内容不允许为空！");
				return false;
			}

			//获取时间
			num = num+1;
			var datetime = getTime();
			time = document.createTextNode("发布时间：" + datetime);
			var li = document.createElement("li");
			li.id = "li";
			//创建删除功能
			var oA = document.createElement("a");
			var oAtext = document.createTextNode("删除");
			oA.href = "#";
			oA.appendChild(oAtext);
			//创建发布文本框
			var fabu = document.createElement("textarea");
			fabu.rows = "10";
			fabu.style = "margin: 0px; width: 760px; height: 138px;";
			fabu.value = text.value;
			fabu.disabled="disabled";
			//创建编辑功能
			var oB = document.createElement("a");
			var oBtext = document.createTextNode("编辑");
			oB.href = "#";
			oB.appendChild(oBtext);
			//创建确认按钮
			var butt = document.createElement("input");
			butt.type = "button";
			butt.value = "确认";
			butt.style.display = "none";
			//解决兼容问题
			var ali = ul.getElementsByTagName("li");
			if(ali.length == 0) {
				ul.appendChild(li);
			} else {
				ul.insertBefore(li, ali[0]);
			}

			//添加节点
			box.appendChild(ul);
			var lou = document.createTextNode("第"+num+"楼");
			var persons = document.createTextNode("发布人："+ person.value);
			document.getElementById("person").value="";
			var textnode = document.createTextNode("发布内容：");
			document.getElementById("text").value="";
			li.appendChild(lou);
			li.appendChild(document.createElement("br"));
			li.appendChild(persons);
			li.appendChild(document.createElement("br"));
			li.appendChild(textnode);
			li.appendChild(document.createElement("br"));
			li.appendChild(fabu);
			li.appendChild(time);
			li.appendChild(oA);
			li.appendChild(oB);
			li.appendChild(butt);
			//删除
			oA.onclick = function() {
				ul.removeChild(this.parentNode);
				//删除时更新
				num1++;
				//删除次数
				document.getElementById("louceng").value=num-num1+"楼";
			};
			//编辑
			oB.onclick = function() {
				fabu.disabled = "";
				butt.style.display = "block";
			}
			//确认更改
			butt.onclick = function() {
				fabu.disabled="disabled";
				butt.style.display = "none";
			}
			//楼层展示
			document.getElementById("louceng").value=num-num1+"楼";
		}
	</script>
</div>
		<div class="wei">
			<div class="one">
				<h2>联系我们</h2>
				<p>部门：计算机科学与信息工程学院</p>
				<p>地址：河北省沧州市运河区黄河西路49号</p>
				<p>电话：0317-7587171</p>
				<p>邮箱：jisunjituanmi@163.com</p>
			</div>
			<div class="two">
				<h2>相关链接</h2>
				<p><a href="https://www.bilibili.com/video/av70004678/" target="_blank">斯蒂芬库里个人纪录片-bilibili</a></p>
				<p><a href="https://baike.baidu.com/item/%E6%96%AF%E8%92%82%E8%8A%AC%C2%B7%E5%BA%93%E9%87%8C/902812?fromtitle=%E5%BA%93%E9%87%8C&fromid=8916710&fr=aladdin" target="_blank">斯蒂芬库里个人介绍-百度百科</a></p>
				<p><a href="https://m.hupu.com/nba/players/stephencurry-3311">斯蒂芬库里球员分析-虎扑</a></p>
				<p><a href="https://china.nba.com/">NBA中国官方网站</a></p>
			</div>
			<div class="three">
				<h2>沟通交流</h2>
				<img src="../img/weixin.png" >
			</div>
		</div>
    </body>

</html>